<script setup lang="ts">
const name = "mock"
import {ref , onMounted , toRefs} from "vue"
import mock from '@/utils/mock'
import i18n from "@/lang/i18n";
import { useI18n } from 'vue-i18n';
const { locale, t } = useI18n();

const tableData = ref<any>([])


onMounted(() => {
  console.log('_______')
  getInfoList()

})

/**
 * 获取信息列表
 */
const getInfoList = () => {
  tableData.value = mock().data
  console.log(tableData.value)
}


/**
 * 表格中编辑按钮
 * @param index
 * @param row
 */
const handleEdit = (index,row) => {
  console.log(index)
  console.log(row)
}

/**
 * 表格中删除按钮
 * @param index
 * @param row
 */
const handleDelete = (index,row) => {
  console.log(index)
  console.log(row)
}


</script>

<template>
  <div class="mock">
    <el-table :data="tableData" style="width: 100%;height: calc(100vh - 170px);overflow: hidden" :stripe="true" >
      <el-table-column :label="$t('date')" width="140" align="center">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('username')" width="100" align="center">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top" width="auto">
            <template #default>
              <div>{{i18n.global.t('username')}}: {{ scope.row.username }}</div>
              <div>{{i18n.global.t('address')}}: {{ scope.row.address }}</div>
              <div>{{i18n.global.t('knownSaying')}}: {{ scope.row.description }}</div>
            </template>
            <template #reference>
              <el-tag>{{ scope.row.username }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column :label="$t('info')" width="100" align="center">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top" width="auto">
            <template #default>
              <div>ip: {{ scope.row.ip }}</div>
              <div>{{i18n.global.t('blog')}}: {{ scope.row.blog }}</div>
              <div>{{i18n.global.t('email')}}: {{ scope.row.email }}</div>
            </template>
            <template #reference>
              <el-avatar shape="square" size="default" :src="scope.row.avatar"></el-avatar>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column :label="$t('identity')" width="180" header-align="center">
        <template #default="scope" align="center">
          <div style=" text-align: center">
            <span>{{ scope.row.type }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('state')" width="180" align="center">
        <template #default="scope">
          <el-switch
              v-model="scope.row.state" >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column :label="$t('operation')" >
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >{{i18n.global.t('edit')}}</el-button
          >
          <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
          >{{i18n.global.t('delete')}}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped lang="scss">

.mock{

}

</style>